<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>

		img {
			width: 80px;
			height: 120px;
		}

		.up {
			display: none;
		}

		.qlose {
			display: block;
		}

		.pop-box {
			width: 100%;
			height: 100%;
			position:absolute;
			left: 0;
			top: 0;
			display: none;
			/* filter: blur(103px) opacity(0.8);; */
			background-color: rgba(222, 221, 221,.9);

		}
		#update {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>

<body>
	<div>
		书名<input type="text" id="bookName">
		类型<input type="text" id="bookType">
		作者<input type="text" id="bookWriter">
		<button class="searchBtn">搜索</button>
	</div>
	<table border="1" width="700">
		<thead>
			<td>序号</td>
			<td>书名字</td>
			<td>类型</td>
			<td>作者</td>
			<td>价格</td>
			<td>出版时间</td>
			<td>封面</td>
			<td>操作</td>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div class="pageBar">
	</div>
	<div class="pop-box">
	</div>

	<div id="update" class="up">
		<!-- 写书，类型，作者，价格，封面的input标签 -->
		书名<input type="text" name="bookName"> <br>
		类型<input type="text" name="bookType"> <br>
		作者<input type="text" name="bookWriter"> <br>
		价格<input type="text" name="bookPrice"> <br>
		出版日期<input type="date" name="pubDate"> <br>
		<input type="hidden" name="id">
		<input type="submit" value="确认" id="updateQueren"> <br>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	function updateBook(bookid) {
		// console.log($('#update'));
		$('#update').attr("class", "qlose");
		$('.pop-box').css("display", "block");
		$('[name=id]').val(bookid)
	}
	$('#updateQueren').click(function () {
		let bookid = $('[name=id]').val()
		let bookName = $('[name="bookName"]').val();
		let bookType = $('[name="bookType"]').val();
		let bookWriter = $('[name="bookWriter"]').val();
		let bookPrice = $('[name="bookPrice"]').val();
		let pubDate = $('[name="pubDate"]').val();
		upadate(bookid, bookName, bookType, bookWriter, bookPrice, pubDate);
	})
	function upadate(bookid, bookName, bookType, bookWriter, bookPrice, pubDate) {
		$.ajax({
			type: "POST",
			url: "/library01/updateBook.do",
			data: {
				bookId: bookid,
				bookName: bookName,
				bookType: bookType,
				bookWriter: bookWriter,
				bookPrice: bookPrice,
				pubDate: pubDate,
			},
			success: function (data) {
				if (data == 1) {
					alert('修改成功！');
				} else {
					alert('修改失败！');
				}
			}
		})
		$('#update').attr("class", "up");
		$('.pop-box').css("display", "none");
	}
	var pageSize = 5;
	var currentPage = 1;
	function searchBook(pageNum) {
		console.log(pageNum);
		var bookName = $("#bookName").val();
		var bookType = $("#bookType").val();
		var bookWriter = $("#bookWriter").val();
		$.ajax({
			url: "getBooks.do",
			type: "GET",
			data: {
				bookName: bookName,
				bookType: bookType,
				bookWriter: bookWriter,
				pageNum: pageNum,
				pageSize: pageSize
			},
			success: function (data) {
				console.log(data);
				currentPage = data.pageNum;
				$("tbody").empty();
				var books = data.data;
				for (var i = 0; i < books.length; i++) {
					var book = books[i];
					var $tr = $("<tr></tr>");
					var $td1 = $("<td></td>").text(i + 1);
					var $td2 = $("<td></td>").text(book.bookName);
					var $td3 = $("<td></td>").text(book.bookType);
					var $td4 = $("<td></td>").text(book.bookWriter);
					var $td5 = $("<td></td>").text(book.bookPrice);
					var $td6 = $("<td></td>").text(book.pubDate);
					var $td7 = $("<td></td>").html("<img src='" + book.bookCover + "'>");
					var $td8 = $("<td></td>");
					var $deletebtn = ("<button onclick='delBook(" + book.bookId + ")'>删除</button>");
					var $updatebtn = ("<button onclick='updateBook(" + book.bookId + ")'>修改</button>");
					$tr.append($td1)
						.append($td2)
						.append($td3)
						.append($td4)
						.append($td5)
						.append($td6)
						.append($td7)
						.append($td8)
						.append($deletebtn)
						.append($updatebtn);
					$("tbody").append($tr);
				};
				makePageBar(data);
			}
		})
	}
	searchBook(1);
	$(".searchBtn").click(function () {
		searchBook(1);
	})
	//生成分页信息条
	function makePageBar(page) {
		$(".pageBar").empty();
		var hasPrev = page.hasPrev;
		var hasNext = page.hasNext;
		var totalPages = page.totalPages;
		var pageNum = page.pageNum;
		if (hasPrev) {
			var $firtBtn = $("<a href='javascript:void(0);' onclick='searchBook(1)'>首页</a>");
			var $prevBtn = $("<a href='javascript:void(0);' onclick='searchBook(" + (pageNum - 1) + ")'>上一页</a>");
			$(".pageBar").append($firtBtn).append($prevBtn);
		}
		for (var i = 1; i <= totalPages; i++) {
			var $pageNumBtn = $("<a href='javascript:void(0);' onclick='searchBook(" + i + ")'>" + i + "</a>");
			$(".pageBar").append($pageNumBtn);

		}
		if (hasNext) {
			var $lastBtn = $("<a href='javascript:void(0);' onclick='searchBook(" + totalPages + ")'>尾页</a>");
			var $nextBtn = $("<a href='javascript:void(0);' onclick='searchBook(" + (pageNum + 1) + ")'>下一页</a>");
			$(".pageBar").append($nextBtn).append($lastBtn);
		}
	}

	function delBook(bookId) {
		$.ajax({
			url: "delBook.do",
			type: "GET",
			data: {
				bookId: bookId
			},
			success: function (data) {
				console.log(data);
				if (data == 'success') {
					alert('删除成功');
					searchBook(currentPage)
				}
			}
		})
	}
</script>

</html>